<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 300px;
            margin: auto;
        }
    </style>
</head>
<body>
    <img src="./img/meinu1.jpeg" alt="">
    <div>上午好</div>
    <script>
        /* 
        分析需求：
        1.根据不同的时间，显示不同图片和div的内容
        */
       let hour = prompt('请问几点了？');
       let img = document.querySelector('img');
       let div = document.querySelector('div');
       if (hour < 12) {
        img.src = "./img/meinu1.jpeg";
        div.innerHTML = '上午好';
       }else if (hour < 14) {
        img.src = "./img/meinu2.jpeg";
        div.innerHTML = '中午好';
       }else{
        img.src = "./img/meinu3.jpeg";
        div.innerHTML = '晚上好';
       }
    </script>
</body>
</html>